<template>
  <div>
    <div class="input-card">
      <h4>线路监测</h4>
      <div class="input-item">
        <input type="button" class="btn" value="南京-镇江-常州-无锡-苏州:赵虎" @click="setOne"/>
        <input type="button" class="btn" value="镇江-丹徒:张龙" @click="setTwo"/>
        <input type="button" class="btn" value="常州-钟楼:张三" @click="setThree"/>
        <input type="button" class="btn" value="常州-郑陆:王五" @click="setFour"/>
        <input type="button" class="btn" value="无锡-新吴:李四" @click="setFive"/>
        <input type="button" class="btn" value="苏州-吴中:赵六" @click="setSix"/>
        <input type="button" class="btn" value="南京-秦淮:李载" @click="setSeven"/>
      </div>
    </div>
  <div id="container" style="width:100vw;height:90vh" />

  </div>
</template>



<script>
// 绘制线路需要的坐标
let lineOne = [[118.767413,32.041544], [119.452753,32.204402], [119.946973,31.772752], [120.301663,31.574729], [120.619585,31.299379]]
let lineTwo=[[119.452753,32.204402],[119.43383, 32.13183]]
let lineThree=[[119.946973,31.772752],[119.90178,31.80221]]
let lineFour=[[119.946973,31.772752],[120.076035,31.826065]]
let lineFive=[[120.301663,31.574729],[120.36434,31.49055]]
let lineSix=[[120.619585,31.299379],[120.63212, 31.26249]]
let lineSeven=[[118.767413,32.041544],[118.79815,32.01112]]
let lineCar=[]//第一个坐标某一线路的起点，第二坐标当前车辆的坐标[118.767413,32.041544], [119.452753,32.204402]
export default {
  data() {
    return {
      firstArr: [116.478935, 39.997761],//中心点/初始坐标
      lineArr:[],
      driverList:[]
    }
  },
  mounted() {
    setTimeout(() => {
      this.getDriver(),
      this.initMap() //异步加载（否则报错initMap is not defined）
    }, 1000)
  },

  methods: {
    setOne(){
      console.log(this.lineArr)
      this.lineArr=lineOne;
      lineCar=[]
      lineCar[0]=lineOne[0]
      lineCar[1]=lineOne[1]
      lineCar[2]=lineOne[2]
      lineCar[3]=lineOne[3]
      lineCar[4]=[this.driverList[5].longitude,this.driverList[5].latitude]
      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      console.log(this.lineArr)
      this.initRoad()

    },
    setTwo(){
      this.lineArr=lineTwo;
      lineCar=[]
      lineCar[0]=lineTwo[0]
      lineCar[1]=lineTwo[1]
      lineCar[2]=lineOne[2]
      lineCar[3]=lineOne[3]
      lineCar[4]=[this.driverList[6].longitude,this.driverList[6].latitude]

      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    setThree(){
      this.lineArr=lineThree;
      lineCar=[]
      lineCar[0]=lineThree[0]
      lineCar[1]=lineThree[1]
      lineCar[2]=lineOne[3]
      lineCar[3]=[this.driverList[1].longitude,this.driverList[1].latitude]

      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    setFour(){
      this.lineArr=lineFour;
      lineCar=[]
      lineCar[0]=lineFour[0]
      lineCar[1]=lineFour[1]
      lineCar[2]=lineOne[3]
      lineCar[3]=[this.driverList[3].longitude,this.driverList[3].latitude]
      lineCar[4]=[]
      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    setFive(){
      this.lineArr=lineFive;
      lineCar=[]
      lineCar[0]=lineFive[0]
      lineCar[1]=[this.driverList[2].longitude,this.driverList[2].latitude]
      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    setSix(){
      this.lineArr=lineSix;
      lineCar=[]
      lineCar[0]=lineSix[0]
      lineCar[1]=lineSix[1]
      lineCar[2]=[this.driverList[4].longitude,this.driverList[4].latitude]

      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    setSeven(){
      this.lineArr=lineSeven;
      lineCar=[]
      lineCar[0]=lineSeven[0]
      lineCar[1]=lineSeven[1]
      lineCar[2]=lineOne[1]
      lineCar[3]=lineOne[2]
      lineCar[4]=lineOne[3]
      lineCar[5]=[this.driverList[0].longitude,this.driverList[0].latitude]
      this.initMap(lineCar)
      this.$store.commit("REMOVE_ARR")
      this.$store.commit("SET_LINEARR",this.lineArr)
      this.initRoad()
    },
    getDriver(){
      axios.get('http://localhost:8099/car/drivers').then(res=>{
        console.log(res.data.data)
        this.driverList=res.data.data
        console.log(this.driverList[0])
      })
    },
    // 初始化地图
    initMap(lineCar) {
      let that = this
      this.map = new AMap.Map('container', {
        resizeEnable: true, // 窗口大小调整
        center: [120.301663,31.574729], // 中心 firstArr: [116.478935, 39.997761],
        zoom: 9
      })

      // 添加maker（小车）
      this.marker = new AMap.Marker({
        map: this.map,
        position: lineCar[0],
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13), // 调整图片偏移
        autoRotation: true, // 自动旋转
        angle: -90 // 图片旋转角度
      })
      // maker点击事件
      this.marker.on('click', function(e) {
        console.log(`我被点击啦---`, e)
        that.nowroad() //点击maker绘制轨迹
        setTimeout(() => {
          this.moveAlong(lineCar,100000) // 动态描点(需要二次动态绘制轨迹开启)
        },500)
      })

    },
    // 初始化轨迹
    initRoad(){
      console.log(this.$store.getters.getLinearr)
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.$store.getters.getLinearr,//预设路线
        showDir: true,
        strokeColor: '#28F', // 线颜色--蓝色
        strokeWeight: 6, // 线宽
        lineJoin: 'round' // 折线拐点的绘制样式
      })

    },

    nowroad() {
     /* // 绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', // 线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round' // 折线拐点的绘制样式
      })*/
      // 绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#AF5', // 线颜色-绿色
        // path: lineArr.reverse(),
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      this.marker.on('moving', e => {
        passedPolyline.setPath(e.passedPath)
      })

    }
  },

}
</script>

<style  scoped>
html, body, #container {
  height: 100%;
  width: 100%;
}


</style>
